<template class="dfsd">
  <div class="dashboard-container">
    <div class="dashboard">
      <ul>
        <li @click="push_router(1)">
          <div class="img">
            <img src="@/assets/img_1.png" />
          </div>
          <div class="div_2">
            <p>今年订单量</p>
            <span>{{ head_data.this_year_order_num }}</span>
          </div>
        </li>

        <li @click="push_router(2)">
          <div class="img">
            <img src="@/assets/img_2.png" />
          </div>
          <div class="div_2">
            <p>待验收订单</p>
            <span>{{ head_data.pending_acceptance_order_nunber }}</span>
          </div>
        </li>
        <li @click="push_router(3)">
          <div class="img">
            <img src="@/assets/img_3.png" />
          </div>
          <div class="div_2">
            <p>已发货订单</p>
            <span>{{ head_data.shipped_order_number }}</span>
          </div>
        </li>
        <li @click="push_router(4)">
          <div class="img">
            <img src="@/assets/img_4.png" />
          </div>
          <div class="div_2">
            <p>未发货订单</p>
            <span>{{ head_data.unfilled_orders_number }}</span>
          </div>
        </li>
        <li @click="push_router(5)">
          <div class="img">
            <img src="@/assets/img_5.png" />
          </div>
          <div class="div_2">
            <p>备货量</p>
            <span>{{ head_data.qty_backordered }}</span>
          </div>
        </li>
        <li @click="push_router(6)">
          <div class="img">
            <img src="@/assets/img_6.png" />
          </div>
          <div class="div_2">
            <p>生产中订单量</p>
            <span>{{ head_data.quantity_of_orders_in_production }}</span>
          </div>
        </li>
        <div v-if="statistics.customer_receivable">
          <li>
            <div class="div_2">
              <p>本年度/本月 应收额(销售额)</p>
              <span>{{ statistics.receivable.year || 0 }}/ {{ statistics.receivable.month || 0 }}</span>
            </div>
          </li>
          <li>
            <div class="div_2">
              <p>客户应收额</p>
              <span>{{ statistics.customer_receivable.month.receivable || 0 }}/ {{
                statistics.customer_receivable.month.receivable || 0 }}</span>
            </div>
          </li>
          <li>
            <div class="div_2">
              <p>本年度/本月 客户欠款总额</p>
              <span>{{ statistics.customer_receivable.month.balance || 0 }}/ {{
                statistics.customer_receivable.month.balance
                || 0 }}</span>
            </div>
          </li>
          <li>
            <div class="div_2">
              <p>供应商的总花费</p>
              <span>{{ statistics.supplier.total || 0 }}</span>
            </div>
          </li>
          <li>
            <div class="div_2">
              <p>本年度/本月 供应商的赊账</p>
              <span>{{ statistics.warehouse_order.month.shezhang || 0 }}/{{ statistics.warehouse_order.year.shezhang
                || 0 }}</span>
            </div>
          </li>
          <li>
            <div class="div_2">
              <p>本年度/本月 供应商的欠款</p>
              <span>{{ statistics.warehouse_order.month.total || 0 }}/{{ statistics.warehouse_order.year.total
                || 0 }}</span>
            </div>
          </li>
          <li>
            <div class="div_2">
              <p>员工工资总和</p>
              <span>{{ statistics.employee.total || 0 }}</span>
            </div>
          </li>
        </div>
      </ul>
    </div>

    <div class="bot_body">
      <div class="bot">
        <span>近30天订单数</span>
        <div class="line" id="main"></div>
      </div>
      <div class="bot">
        <span>年度客户下单TOP10 </span>
        <div class="line" id="top10"></div>
      </div>
    </div>

    <div class="bot_body">
      <div class="bot">
        <span>年度产品TOP10</span>
        <div class="line" id="box_3"></div>
      </div>
      <div class="bot">
        <span>近6个月数据 </span>
        <div class="line" id="box_4"></div>
      </div>
    </div>

    <div class="bot_body">
      <!-- <div class="bot">
        <span>代理商近6个月订单数</span>
        <div class="line" style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          ">
          <el-table :data="dls_tableData" border style="width: 100%">
            <el-table-column prop="customer_name" label="姓名">
            </el-table-column>
            <el-table-column v-for="(item, indexs) in dls_tableData_data" prop="count" :key="indexs" :label="item"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.count[indexs] }}
                <i class="el-icon-top-right" style="color: #e00" v-if="scope.row.count[indexs] - scope.row.count[indexs - 1] > 0
          " />
                <i class="el-icon-bottom-right" style="color: rgb(2, 167, 71)" v-if="scope.row.count[indexs] - scope.row.count[indexs - 1] < 0
          " />
              </template>
</el-table-column>
</el-table>
<div style="text-align: center">
  <el-pagination small layout="prev, pager, next" @current-change="handleCurrentChange_dls" background
    @prev-click="prev_dls" @next-click="next_dls" :page-size="pagination_dls.page_size" :total="total_dls">
  </el-pagination>
</div>
</div>
</div> -->
      <div class="bot">
        <span>业务员业绩</span>
        <div class="line" style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          ">
          <el-table :data="ywy_tableData" border style="width: 100%">
            <el-table-column label="姓名">
              <template slot-scope="scope">
                {{ scope.row.user.username }}
              </template>
            </el-table-column>
            <el-table-column v-for="(item, inde) in ywys_tableData" prop="count" :key="inde" :label="item"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.count[inde] }}
                <i class="el-icon-top-right" style="color: #e00"
                  v-if="scope.row.count[inde] - scope.row.count[inde - 1] > 0" />
                <i class="el-icon-bottom-right" style="color: rgb(2, 167, 71)"
                  v-if="scope.row.count[inde] - scope.row.count[inde - 1] < 0" />
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: center">
            <el-pagination small @current-change="handleCurrentChange_ywy" background @prev-click="prev_kh"
              @next-click="next_ywy" layout="prev, pager, next" :page-size="pagination_ywy.page_size"
              :total="total_ywy">
            </el-pagination>
          </div>
        </div>
      </div>

      <div class="bot">
        <span>客户近6个月订单数</span>
        <div class="line" style="
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          ">
          <el-table :data="kh_tableData" border style="width: 100%">
            <el-table-column prop="customer_name" label="姓名">
            </el-table-column>
            <el-table-column v-for="(item, inde) in kh_tableData_data" prop="count" :key="inde" :label="item"
              align="center">
              <template slot-scope="scope">
                {{ scope.row.count[inde] }}
                <i class="el-icon-top-right" style="color: #e00"
                  v-if="scope.row.count[inde] - scope.row.count[inde - 1] > 0" />
                <i class="el-icon-bottom-right" style="color: rgb(2, 167, 71)"
                  v-if="scope.row.count[inde] - scope.row.count[inde - 1] < 0" />
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: center">
            <el-pagination small @current-change="handleCurrentChange_kh" background @prev-click="prev_kh"
              @next-click="next_kh" layout="prev, pager, next" :page-size="pagination_kh.page_size" :total="total_kh">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>

    <div class="bot_body">
      <div class="bot">
        <span>近6个月系数订单量</span>
        <div class="line" id="box_xishu"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getIndexHeaderData,
  getThirtyDayOrderNumber,
  getTOP10Customer,
  getAnnualProductOrderNumber,
  getNearlySexMonthsOrderNumber,
  getAgentNearlySexMonthsOrderNumber,
  getSalesManMonthsOrderNumber,
  getStatistics,
  getCoefficientSixMonthsOrderNumber
} from "@/api/user";

export default {
  name: "dashboard",
  data() {
    return {
      pagination_dls: {
        per_page: 5,
        page: 1,
      },
      statistics: "",
      total_dls: 0,
      pagination_kh: {
        per_page: 5,
        page: 1,
      },
      total_kh: 0,
      head_data: {},
      styles: {
        "--background_bg": "#000",
        "--bules": "#3461c4",
        "--colors": "#fff",
      },
      dls_tableData: [],
      dls_tableData_data: [],
      kh_tableData: [],
      kh_tableData_data: [],
      ywy_tableData: [],
      ywys_tableData: [],
      pagination_ywy: {
        per_page: 5,
        page: 1,
      },
      total_ywy: 0
    };
  },
  mounted() {
    this.getdata();
    this.line();
    this.get_TOP10Customer();
    this.get_AnnualProductOrderNumber();
    this.get_NearlySexMonthsOrderNumber();
    this.get_AgentNearlySexMonthsOrderNumber();
    this.getStatistics();
    this.get_SalesManMonthsOrderNumber()
    this.get_CoefficientSixMonthsOrderNumber()
  },
  methods: {
    get_CoefficientSixMonthsOrderNumber() {
      getCoefficientSixMonthsOrderNumber().then(res => {
        if (res.code == 200) {
          let xAxis = res.data.xAxis;
          let yAxis = res.data.yAxis;
          var chartDom = document.getElementById("box_xishu");
          var myChart = this.$echarts.init(chartDom);
          var option;

          option = {
            color: "#cc5c45",
            grid: {
              top: 20,
              right: 0,
              bottom: 25,
            },
            tooltip: {
              trigger: "axis",
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: xAxis,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: yAxis,
                type: "line",
                areaStyle: {},
              },
            ],
          };

          option && myChart.setOption(option);
        }
      });
    },
    get_SalesManMonthsOrderNumber() {
      getSalesManMonthsOrderNumber(this.pagination_ywy).then(res => {
        this.ywy_tableData = res.data.yAxis.data
        this.ywys_tableData = res.data.xAxis
        this.total_ywy = res.res.data.yAxis.total
      })
    },
    getStatistics() {
      getStatistics().then((res) => {
        if (res.code == 200) {
          this.statistics = res.data;
          if (res.data.receivable_record.length) {
            // debugger
            let xAxis = [];
            let yAxis = [];
            res.data.receivable_record.map(li => {
              xAxis.push(li.user_name)
              yAxis.push(li.balance)
            })
            var chartDom = document.getElementById("box_5");
            var myChart = this.$echarts.init(chartDom);
            var option;
            option = {
              grid: {
                top: 20,
                right: 0,
                bottom: 25,
              },
              tooltip: {
                trigger: "axis",
              },
              xAxis: {
                type: "category",
                data: xAxis,
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: yAxis,
                  type: "bar",
                  itemStyle: {
                    color: function (params) {
                      var colorList = [
                        "#C1232B",
                        "#B5C334",
                        "#FCCE10",
                        "#E87C25",
                        "#27727B",
                        "#FE8463",
                        "#9BCA63",
                        "#FAD860",
                        "#F3A43B",
                        "#60C0DD",
                        "#D7504B",
                        "#C6E579",
                        "#F4E001",
                        "#F0805A",
                        "#26C0C0",
                      ];
                      return colorList[params.dataIndex];
                    },
                  },
                },
              ],
            };

            option && myChart.setOption(option);
          }
        }
      });
    },
    handleCurrentChange_dls(val) {
      console.log(`当前页: ${val}`);
      this.pagination_dls.page = val;
      this.get_AgentNearlySexMonthsOrderNumber(1);
    },
    prev_dls() {
      this.pagination_dls.page = this.pagination_dls.page - 1;
      this.get_AgentNearlySexMonthsOrderNumber(1);
    },
    next_dls() {
      this.pagination_dls.page = this.pagination_dls.page + 1;
      this.get_AgentNearlySexMonthsOrderNumber(1);
    },
    handleCurrentChange_kh(val) {
      console.log(`当前页: ${val}`);
      this.pagination_kh.page = val;
      this.get_AgentNearlySexMonthsOrderNumber(2);
    },
    prev_kh() {
      this.pagination_kh.page = this.pagination_kh.page - 1;
      this.get_AgentNearlySexMonthsOrderNumber(2);
    },
    next_kh() {
      this.pagination_kh.page = this.pagination_kh.page + 1;
      this.get_AgentNearlySexMonthsOrderNumber(2);
    },
    next_ywy() {
      this.pagination_ywy.page = this.pagination_ywy.page + 1;
      this.get_SalesManMonthsOrderNumber()
    },
    handleCurrentChange_ywy(val) {
      console.log(`当前页: ${val}`);
      this.pagination_ywy.page = val;
      this.get_SalesManMonthsOrderNumber()
    },
    prev_ywy() {
      this.pagination_ywy.page = this.pagination_ywy.page - 1;
      this.get_SalesManMonthsOrderNumber()
    },
 
    get_AgentNearlySexMonthsOrderNumber(type) {
      if (type == 1 || !type) {
        // 代理商
        getAgentNearlySexMonthsOrderNumber({
          is_agent: 1,
          ...this.pagination_dls,
        }).then((res) => {
          if (res.code == 200) {
            this.dls_tableData = res.data.yAxis.data;
            this.dls_tableData_data = res.data.xAxis;
            this.total_dls = res.data.yAxis.total;
          }
        });
      }
      // 客户
      if (type == 2 || !type) {
        getAgentNearlySexMonthsOrderNumber({
          is_agent: 2,
          ...this.pagination_kh,
        }).then((res) => {
          if (res.code == 200) {
            this.kh_tableData = res.data.yAxis.data;
            this.kh_tableData_data = res.data.xAxis;
            this.total_kh = res.data.yAxis.total;
          }
        });
      }
    },
    push_router(type) {
      switch (type) {
        case 1:
          this.$router.push("/order_goods/order_goods");
          break;
        case 2:
          this.$router.push("/iFinishProductList/iFinishProductList");
          break;
        case 3:
          this.$router.push("/iFinishProductList/logistics");
          break;
        case 4:
          this.$router.push("/iFinishProductList/finishProductList");
          break;
        case 5:
          this.$router.push("/iFinishProductList/choice");
          break;
        case 6:
          this.$router.push("/order_goods/order_Progress");
          break;
      }
    },
    get_NearlySexMonthsOrderNumber() {
      getNearlySexMonthsOrderNumber().then((res) => {
        if (res.code == 200) {
          let xAxis = res.data.xAxis;
          let yAxis = res.data.yAxis;
          var chartDom = document.getElementById("box_4");
          var myChart = this.$echarts.init(chartDom);
          var option;

          option = {
            color: "#cc5c45",
            grid: {
              top: 20,
              right: 0,
              bottom: 25,
            },
            tooltip: {
              trigger: "axis",
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: xAxis,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: yAxis,
                type: "line",
                areaStyle: {},
              },
            ],
          };

          option && myChart.setOption(option);
        }
      });
    },
    get_AnnualProductOrderNumber() {
      getAnnualProductOrderNumber().then((res) => {
        if (res.code == 200) {
          let xAxis = res.data.xAxis;
          let yAxis = res.data.yAxis;
          var chartDom = document.getElementById("box_3");
          var myChart = this.$echarts.init(chartDom);
          var option;
          option = {
            grid: {
              top: 20,
              right: 0,
              bottom: 25,
            },
            tooltip: {
              trigger: "axis",
            },
            xAxis: {
              type: "category",
              data: xAxis,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: yAxis,
                type: "bar",
                itemStyle: {
                  color: function (params) {
                    var colorList = [
                      "#C1232B",
                      "#B5C334",
                      "#FCCE10",
                      "#E87C25",
                      "#27727B",
                      "#FE8463",
                      "#9BCA63",
                      "#FAD860",
                      "#F3A43B",
                      "#60C0DD",
                      "#D7504B",
                      "#C6E579",
                      "#F4E001",
                      "#F0805A",
                      "#26C0C0",
                    ];
                    return colorList[params.dataIndex];
                  },
                },
              },
            ],
          };

          option && myChart.setOption(option);
        }
      });
    },
    // 年度客户下单TOP10
    get_TOP10Customer() {
      getTOP10Customer().then((res) => {
        if (res.code == 200) {
          const arr1 = res.data.xAxis;
          const arr2 = res.data.yAxis;
          // 使用map方法遍历arr1，将每个元素与arr2对应位置的元素组成一个新数组
          const result = arr1.map((item, index) => [item, arr2[index]]);
          var data = [];
          for (var i = result.length - 1; i >= 0; i--) {
            data.push(result[i]);
          }
          var chartDom = document.getElementById("top10");
          var myChart = this.$echarts.init(chartDom);
          var option;
          option = {
            grid: {
              top: 20,
              right: 0,
              bottom: 25,
            },
            tooltip: {
              trigger: "axis",
            },
            dataset: {
              source: [["amount", "product"], ...data],
            },
            // grid: { containLabel: true },
            xAxis: { name: "amount" },
            yAxis: { type: "category" },
            series: [
              {
                type: "bar",
                encode: {
                  // Map the "amount" column to X axis.
                  x: "amount",
                  // Map the "product" column to Y axis
                  y: "product",
                },
                itemStyle: {
                  color: function (params) {
                    var colorList = [
                      "#C1232B",
                      "#B5C334",
                      "#FCCE10",
                      "#E87C25",
                      "#27727B",
                      "#FE8463",
                      "#9BCA63",
                      "#FAD860",
                      "#F3A43B",
                      "#60C0DD",
                      "#D7504B",
                      "#C6E579",
                      "#F4E001",
                      "#F0805A",
                      "#26C0C0",
                    ];
                    return colorList[params.dataIndex];
                  },
                },
              },
            ],
          };

          option && myChart.setOption(option);
        }
      });
    },
    getdata() {
      getIndexHeaderData().then((res) => {
        if (res.code == 200) {
          this.head_data = res.data;
        }
      });
    },
    // 近30天订单数
    line() {
      getThirtyDayOrderNumber().then((res) => {
        if (res.code == 200) {
          var chartDom = document.getElementById("main");
          var myChart = this.$echarts.init(chartDom);
          var option;
          let timedata = res.data.xAxis;
          let data_y = res.data.yAxis;
          option = {
            grid: {
              top: 20,
              right: 0,
              bottom: 25,
            },
            tooltip: {
              trigger: "axis",
            },
            // grid: {
            //   right: "20%",
            // },
            calculable: true,
            xAxis: {
              type: "category",
              data: timedata,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: data_y,
                type: "line",
              },
            ],
          };

          option && myChart.setOption(option);
        }
      });
    },
  },
};
</script>
<style scoped>
/* :root {
  --background_bg: #000;
  --bules: #3461c4;
  --colors: #fff;
} */
.dashboard-container {
  background-color: var(--background_bg);
}

.dashboard ul li div.div_2 p,
.dashboard ul li div.div_2 span {
  color: var(--colors);
}

.dashboard ul li {
  background: var(--bules);
}
</style>
<style scoped>
.dashboard-container {
  width: 100%;
  box-sizing: border-box;
}

section {
  padding: 0px !important;
  box-sizing: border-box;
}

ul li {
  text-decoration: none;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dashboard ul {
  /* display: flex;
  flex-wrap: wrap;
  justify-content: space-around; */
  padding: 0;
  margin: 0;
}

.dashboard ul>li {
  width: 225px;
  padding: 10px;
  float: left;
  margin-right: 49px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  margin-top: 15px;
  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.dashboard ul li {
  padding: 10px;
  float: left;
  margin-right: 20px;
  box-sizing: border-box;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  border-radius: 10px;
  margin-top: 15px;
  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.dashboard ul li:last-child {
  margin-right: 0;
}

.dashboard ul li div.img {
  width: 60px;
  height: 60px;
}

.dashboard ul li div.img img {
  width: 100%;
}

.dashboard ul li div.div_2 {
  flex: 1;
  margin-left: 10px;
  text-align: center;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-;
}

.dashboard ul li div.div_2 p {
  font-size: 16px;
  padding: 0;
  margin: 0;
}

.dashboard ul li div.div_2 span {
  font-size: 32px;
  font-weight: bold;
}

/* .dashboard ul li:nth-child(4n-3) {
  margin-left: 25px;
} */

.line {
  width: 250px;
  height: 300px;
}

.bot_body {
  box-sizing: border-box;
  display: flex;
  /* margin-top:15px; */
  clear: both;
}

.bot {
  width: 50%;
  margin-top: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  margin-left: 15px;
  background: #fff;
  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
}

.bot_body .bot:nth-child(3n-2) {
  margin-left: 0;
}

.bot span {
  font-size: 16px;
  color: #1f6893;
  font-weight: bold;
  border-left: 3px solid #1f6893;
  padding-left: 10px;
}

.bot>div {
  width: 100%;
  height: 300px;
}
</style>
